<script setup>
import * as echarts from 'echarts';
import {onMounted, watch} from 'vue';
import axios from "axios";
import mitt from "mitt";
import emitter from "./mitt.ts";
// import emitter from "../utils/mitt.js";

let chart_20fbe8e631b9441e9f8badce7785ccf9;
let option_20fbe8e631b9441e9f8badce7785ccf9;
let prop = defineProps({
  year: String
})
onMounted( () => {
  axios.get('http://127.0.0.1:5000/radar/'+prop.year).then(res => {
    let rt = document.getElementById('rt')
    let data = res.data
    chart_20fbe8e631b9441e9f8badce7785ccf9 = echarts.init(rt, 'white', {renderer: 'canvas'});
    option_20fbe8e631b9441e9f8badce7785ccf9 = {
      "animation": true,
      "animationThreshold": 2000,
      "animationDuration": 1000,
      "animationEasing": "cubicOut",
      "animationDelay": 0,
      "animationDurationUpdate": 300,
      "animationEasingUpdate": "cubicOut",
      "animationDelayUpdate": 0,
      "aria": {
        "enabled": false
      },
      "color": [
        "#5470c6",
        "#91cc75",
        "#fac858",
        "#ee6666",
        "#73c0de",
        "#3ba272",
        "#fc8452",
        "#9a60b4",
        "#ea7ccc"
      ],
      "series": [
        {
          "type": "radar",
          "name": "\u5404\u79d1\u4eba\u6570",
          "data": [
            data
          ],
          "label": {
            "show": false,
            "margin": 8
          },
          "itemStyle": {
            "normal": {
              "color": "#f9713c"
            }
          },
          "lineStyle": {
            "show": true,
            "width": 1,
            "opacity": 1,
            "curveness": 0,
            "type": "solid"
          },
          "areaStyle": {
            "opacity": 0
          },
          "rippleEffect": {
            "show": true,
            "brushType": "stroke",
            "scale": 2.5,
            "period": 4
          }
        }
      ],
      "tooltip": {
        "show": true,
        "trigger": "item",
        "triggerOn": "mousemove|click",
        "axisPointer": {
          "type": "line"
        },
        "showContent": true,
        "alwaysShowContent": false,
        "showDelay": 0,
        "hideDelay": 100,
        "enterable": false,
        "confine": false,
        "appendToBody": false,
        "transitionDuration": 0.4,
        "textStyle": {
          "fontSize": 14
        },
        "borderWidth": 0,
        "padding": 5,
        "order": "seriesAsc"
      },
      "radar": [
        {
          "indicator": [
            {
              "name": "\u7269\u7406",
              "max": 460000,
              "color": "black",
              "font_size": 18
            },
            {
              "name": "\u5316\u5b66",
              "max": 460000,
              "color": "black",
              "font_size": 18
            },
            {
              "name": "\u751f\u7269",
              "max": 460000,
              "color": "black",
              "font_size": 18
            },
            {
              "name": "\u653f\u6cbb",
              "max": 460000,
              "color": "black",
              "font_size": 18
            },
            {
              "name": "\u5386\u53f2",
              "max": 460000,
              "color": "black",
              "font_size": 18
            },
            {
              "name": "\u5730\u7406",
              "max": 460000,
              "color": "black",
              "font_size": 18
            }
          ],
          "shape": "circle",
          "startAngle": 90,
          "name": {
            "textStyle": {}
          },
          "splitLine": {
            "show": true,
            "lineStyle": {
              "show": true,
              "width": 1,
              "opacity": 1,
              "curveness": 0,
              "type": "solid"
            }
          },
          "splitArea": {
            "show": true,
            "areaStyle": {
              "opacity": 0
            }
          },
          "axisLine": {
            "show": true,
            "onZero": true,
            "onZeroAxisIndex": 0
          }
        }
      ],
      "title": [
        {
          "show": true,
          "text": "\u5404\u79d1\u4eba\u6570\u96f7\u8fbe\u56fe",
          "target": "blank",
          "subtarget": "blank",
          "padding": 5,
          "itemGap": 10,
          "textAlign": "auto",
          "textVerticalAlign": "auto",
          "triggerEvent": false
        }
      ]
    };
    chart_20fbe8e631b9441e9f8badce7785ccf9.setOption(option_20fbe8e631b9441e9f8badce7785ccf9);
  })
})

watch(prop , (newVal, oldVal) => {
  if (Number(newVal.year) <= 24){
    axios.get('http://127.0.0.1:5000/radar/'+newVal.year).then((res) => {
      option_20fbe8e631b9441e9f8badce7785ccf9.series[0].data=[res.data]
      chart_20fbe8e631b9441e9f8badce7785ccf9.setOption(option_20fbe8e631b9441e9f8badce7785ccf9);
    })
  }else {
    alert("没有数据")
  }
})

emitter.on('change', (data) => {
  let p = prop.year+","+data.start+","+data.end
  axios.get("http://127.0.0.1:5000/c/"+p).then(
       (res) => {
         let label = ["物理","化学", "生物", "政治", "历史", "地理"]
         let data = new Map(Object.entries(res.data))
         let change = []
         label.forEach((item) => {
            change.push(data.get(item))
         })
         option_20fbe8e631b9441e9f8badce7785ccf9.series[0].data=[change]
         chart_20fbe8e631b9441e9f8badce7785ccf9.setOption(option_20fbe8e631b9441e9f8badce7785ccf9);


       }
  )
})

</script>

<template>
  <div id="rt"></div>
</template>

<style scoped>
#rt {
  width: 100%;
  height: 100%;
}
</style>
